<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/main.css" />
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="js/scroll.js"></script>
	<title>聊天机器人</title>
</head>

<body>
	<div class="wrap">
		<!-- 头部 Header 区域 -->
		<div class="header">
			<h3>小思同学</h3>
			<img src="img/person01.png" alt="icon" />
		</div>
		<!-- 中间 聊天内容区域 -->
		<div class="main">
			<ul class="talk_list" style="top: 0px;">
				<li class="left_word">
					<img src="img/person01.png" />
					<span>你好</span>
				</li>
				<!-- <li class="right_word">
					<img src="img/person02.png" />
					<span>你好哦</span>
				</li> -->
			</ul>
			<div class="drag_bar" style="display: none;">
				<div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>
			</div>
		</div>
		<!-- 底部 消息编辑区域 -->
		<div class="footer">
			<img src="img/person02.png" alt="icon" />
			<input type="text" placeholder="说的什么吧..." class="input_txt" />
			<input type="button" value="发 送" class="input_sub" />
		</div>
	</div>
	<!-- 导入axios.js -->
	<script src="./js/axios.js"></script>
	<script>
		$(function () {
			// 初始化右侧滚动条
			// 这个方法定义在scroll.js中
			resetui()
			// 1.获取元素   
			// 注册 按键
			// 取值input  非空   添加三部曲  加类名 清空  调用焦点方法  滚动条
			//  发送 aiax  把返回值渲染给机器人   
			// 发送 aiax  把机器人  语音获取 渲染给机器人
			let leftWord = document.querySelector('.left_word')
			let rightWord = document.querySelector('.right_word')
			let ul = document.querySelector('ul')
			let inputSub = document.querySelector('.input_sub')
			let inputTxt = document.querySelector('.input_txt')
			inputSub.onclick = function () {
				if (inputTxt.value.trim() == ``) {
					inputTxt.value = ``
					return alert(`请输入想要说的话`)
				}
				//  添加三部曲  加类名 清空  调用焦点方法  滚动条
				let newLi = document.createElement(`li`)
				newLi.className = `right_word`
				newLi.innerHTML = `<img src="img/person02.png"/>
					<span>${inputTxt.value}</span>`
				ul.appendChild(newLi)


				axios({

					url: 'http://www.liulongbin.top:3009/api/robot',
					method: 'get',
					params: {
						spoken: inputTxt.value
					}
				}).then(({ data: res }) => {
					console.log(res);
					//成功回调
					let newLi = document.createElement(`li`)
					newLi.className = `left_word`
					newLi.innerHTML = `	<img src="img/person01.png" />
					<span>${res.data.info.text}</span>`
					ul.appendChild(newLi)
					axios({
						url: 'http://www.liulongbin.top:3009/api/synthesize',
						method: 'get',

						params: { text: res.data.info.text }
					}).then(({ data: res1 }) => {
						//成功回调
						console.log(res1.voiceUrl);
						let newLi = document.createElement(`li`)
						newLi.className = `left_word`
						newLi.innerHTML = `	<img src="img/person01.png" />
					<span><audio src="${res1.voiceUrl}" autoplay  controls ></audio></span>`
						ul.appendChild(newLi)
							resetui()
					})
				})
				inputTxt.value = ``
				inputTxt.focus()
				resetui()
			}
		})

		//  发送 aiax  把返回值渲染给机器人
			// 发送 aiax  把机器人  语音获取 渲染给机器人

	</script>
</body>

</html>